<template>
    <div>
      <!-- 主体布局 -->
      <div class="main-layout">
        <!-- 左侧菜单 -->
        <div class="sidebar-menu" :class="{ 'collapsed': isSidebarCollapsed }">
          <div class="header-logo-title">
            <img v-show="!isSidebarCollapsed" src="@/assets/img/logo.png" alt="Logo" class="header-logo" />
            <span v-show="!isSidebarCollapsed" class="header-title" style="font-size: 1.25rem;">X平台</span>
            <div class="sidebar-toggle" @click="toggleSidebar">
              <img v-if="!isSidebarCollapsed" src="@/assets/img/closeMenu.png" class="toggle-icon" />
              <img v-else src="@/assets/img/openMenu.png" class="toggle-icon" />
            </div>
          </div>
          <div class="menu-item" 
               :class="{ 'active': activeTab.indexOf('/home') > -1 }"
               @mouseenter="setMenuHover('/home')"
               @mouseleave="clearMenuHover">
            <img :src="getMenuIcon('/home')" alt="首页" class="menu-icon" />
            <router-link :to="'/home/'+menuCount" class="menu-link" @click="saveActiveNav('/home/'+menuCount, { name: '首页', paneName: '首页', path: '/home/'+menuCount })">
              <span class="menu-text">首页</span>
            </router-link>
          </div>
        <div class="menu-item" 
             :class="{ 'active': activeTab.indexOf('/userInfo') > -1 }"
             @mouseenter="setMenuHover('/userInfo')"
             @mouseleave="clearMenuHover">
             <img :src="getMenuIcon('/userInfo')" alt="用户信息" class="menu-icon" />
             <router-link :to="'/userInfo/'+menuCount" class="menu-link" @click="saveActiveNav('/userInfo/'+menuCount, { name: '菜单一', paneName: '菜单一',path: '/userInfo/'+menuCount })">
               <span class="menu-text">菜单一</span>
             </router-link>
           </div>
          <div class="menu-item" 
               :class="{ 'active': activeTab.indexOf('/loginLog') > -1 }"
               @mouseenter="setMenuHover('/loginLog')"
               @mouseleave="clearMenuHover">
            <img :src="getMenuIcon('/loginLog')" alt="登录日志" class="menu-icon" />
            <router-link :to="'/loginLog/'+menuCount" class="menu-link" @click="saveActiveNav('/loginLog/'+menuCount, { name: '菜单二', paneName: '菜单二', path: '/loginLog/'+menuCount })">
            <span class="menu-text">菜单二</span>
          </router-link>
          </div>
          <div class="menu-item" 
               :class="{ 'active': activeTab.indexOf('/notUid') > -1 }"
               @mouseenter="setMenuHover('/notUid')"
               @mouseleave="clearMenuHover">
            <img :src="getMenuIcon('/notUid')" alt="登录日志" class="menu-icon" />
            <router-link :to="'/notUid/'+menuCount" class="menu-link" @click="saveActiveNav('/notUid/'+menuCount, { name: '菜单三', paneName: '菜单三', path: '/notUid/'+menuCount })">
            <span class="menu-text">菜单三</span>
          </router-link>
          </div>
          <div class="menu-item" 
               :class="{ 'active': activeTab.indexOf('/uid') > -1 }"
               @mouseenter="setMenuHover('/uid')"
               @mouseleave="clearMenuHover">
            <img :src="getMenuIcon('/uid')" alt="登录日志" class="menu-icon" />
            <router-link :to="'/uid/'+menuCount" class="menu-link" @click="saveActiveNav('/uid/'+menuCount, { name: '菜单四', paneName: '菜单四', path: '/uid/'+menuCount })">
            <span class="menu-text">菜单四</span>
          </router-link>
          </div>
          <div class="menu-item" 
               :class="{ 'active': activeTab.indexOf('/third') > -1 }"
               @mouseenter="setMenuHover('/third')"
               @mouseleave="clearMenuHover">
            <img :src="getMenuIcon('/third')" alt="菜单五" class="menu-icon" />
            <router-link :to="'/third/'+menuCount" class="menu-link" @click="saveActiveNav('/third/'+menuCount, { name: '菜单五', paneName: '菜单五', path: '/third/'+menuCount })">
            <span class="menu-text">菜单五</span>
          </router-link>
          </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="right-content" :class="{ 'sidebar-collapsed': isSidebarCollapsed }">
          <!-- 顶部header -->
          <header class="content-header">
            <div class="header-inner">
              <div class="header-left">
                <el-icon class="header-grid-icon" @click="goToHome"><HomeFilled /></el-icon>
                <span class="header-title-tab">{{ getCurrentPageTitle() }}</span>
              </div>
              <div class="header-btn-group">
                <el-tooltip content="召唤chat" placement="bottom" effect="light">
                  <img src="@/assets/img/bot.png" alt="chat" class="header-btn-icon" @click="openAIAssistant" />
                </el-tooltip>
              </div>
              <div class="header-right">
              </div>
              <div class="header-user-info">
                <span class="username">{{ username }}</span>
                <el-tooltip content="退出登录" placement="bottom" effect="light">
                  <img src="@/assets/img/logout.png" alt="退出登录" class="header-btn-icon" />
                </el-tooltip>
              </div>
            </div>
          </header>
          
          <!-- 内容区域 -->
          <div class="content-area">
            <!-- 动态tab标签页 -->
            <el-tabs
              v-if="allTabs.length > 0"
              v-model="activeTab"
              type="card"
              @tab-click="clickTab"
              @tab-remove="removeTab"
            >
              <el-tab-pane
                v-for="item in allTabs"
                :key="item.path"
                :label="item.paneName"
                :name="item.path"
                :closable="item.path !== '/home/1'"
              >
              </el-tab-pane>
            </el-tabs>
            
            <router-view v-slot="{ Component }">
              <keep-alive>
                <component :is="Component" :key="$route.path" />
              </keep-alive>
            </router-view>
          </div>
        </div>
      </div>
      
      <!-- chat抽屉 -->
      <el-drawer
        v-model="aiAssistantVisible"
        title="chat"
        direction="rtl"
        size="50%"
        :with-header="true"
        :before-close="closeAIAssistant"
        class="ai-assistant-drawer"
      >
        <template #header>
          <div class="drawer-header">
            <img src="@/assets/img/bot_active.png" alt="chat" class="drawer-icon" />
            <span>chat</span>
          </div>
        </template>
        <div id="aiBot" class="ai-bot-container">
        </div>
      </el-drawer>
    </div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   import { useRouter } from 'vue-router';
   import { ElMessage } from 'element-plus';
   import 'element-plus/dist/index.css';
   
   // 导入图片资源
   import defaultImg from '@/assets/img/default.png';
   import activeImg from '@/assets/img/active.png';
   
   export default {
     name: 'baseLayout',
     components: {
       
     },
     setup() {
      const router = useRouter();
      router.push('/home/1');

      // 默认打开首页，因为默认打开的首页占用了menuCount=1的值，所以menuCount初始化时设置为2
      const menuCount = ref(2);
      // 所有tab
      let allTabs = ref([{
        name: '首页',
        paneName: '首页',
        path: '/home/1'
      }]);
      let activeTab = ref('/home/1');
      // 菜单激活状态相关数据
      const hoveredMenu = ref(null);
   
      const isSidebarCollapsed = ref(false);
      const username = ref('');
      // 抽屉
      const aiAssistantVisible = ref(false);
      // 菜单图标配置
      const menuIcons = {
        '/home': {
          default: defaultImg,
          active: activeImg,
        },
        '/userInfo': {
          default: defaultImg,
          active: activeImg,
        },
        '/loginLog': {
          default: defaultImg,
          active: activeImg,
        },
        '/notUid': {
          default: defaultImg,
          active: activeImg,
        },
        '/uid': {
          default: defaultImg,
          active: activeImg,
        },
        '/third': {
          default: defaultImg,
          active: activeImg,
        }
      };
   
      // 切换侧边栏
      const toggleSidebar = () => {
        isSidebarCollapsed.value = !isSidebarCollapsed.value;
      };
      
      // 设置菜单悬停状态
      const setMenuHover = (path) => {
        hoveredMenu.value = path;
      };
      
      // 清除菜单悬停状态
      const clearMenuHover = () => {
        hoveredMenu.value = null;
      };
      
      // 获取菜单图标
      const getMenuIcon = (path) => {
        const icons = menuIcons[path];
        if (!icons) return '';
        
        // 如果当前路径是激活状态或者鼠标悬停，使用激活图标
        if (activeTab.value.indexOf(path) > -1 || hoveredMenu.value === path) {
          return icons.active;
        }
        return icons.default;
      };
       
      // 退出登录
      const handleLogout = () => {
        ElMessage.success('退出登录成功');
      };
      
      // 打开抽屉
      const openAIAssistant = () => {
        aiAssistantVisible.value = true;
      };
      
      // 关闭抽屉
      const closeAIAssistant = () => {
        aiAssistantVisible.value = false;
      };
       
      // 获取当前页面标题
      const getCurrentPageTitle = () => {
        const currentTab = allTabs.value.find(tab => tab.path === activeTab.value);
        return currentTab ? currentTab.paneName : '首页';
      };
      
      // 跳转到首页
      const goToHome = () => {
        // 激活首页tab
        activeTab.value = '/home/1';
        // 跳转到首页路由
        changeActiveRoute('/home/1');
      };
      
       // 跳转路由，激活路由
      const changeActiveRoute = (path) => {
        activeTab.value = path;
        router.push(path);
      };
       // 点击tab进行切换
      const clickTab = (tab) => {
        let tabPath = tab.paneName;
        let selectTab = allTabs.value.find((item) => item.path === tabPath);
        if (selectTab !== undefined) {
          // 激活 Tab
          activeTab.value = selectTab.path;
          // 跳转页面，激活左侧菜单
          changeActiveRoute(selectTab.path);
        }
      };
      // 移除tab。targetName 要移除的tab
      const removeTab = (targetName) => {
        let tabs = allTabs.value;
        // activeName 当前激活的tab
        let activeName = activeTab.value;
        // 如果删除的是激活状态的tab，那么将激活状态转给其他tab
        if (activeTab.value === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.path === targetName) {
              // 下一个 tab：索引-1或者索引+1
              const nextTab = tabs[index + 1] || tabs[index - 1];
              // 如果存在就激活 Tab，存储激活的 Tab，跳转页面
              if (nextTab) {
                activeName = nextTab.path;
                changeActiveRoute(nextTab.path);
                // 否则就跳转到首页
              } else {
                changeActiveRoute("/home/1");
              }
            }
          });
        }
        // 激活 tab
        activeTab.value = activeName;
        // 移除选择的 Tab
        allTabs.value = tabs.filter((tab) => tab.path !== targetName);
      };

       // 点击左侧菜单
      const saveActiveNav = (path, tab) => {
        menuCount.value++;
        // 当前激活的菜单
        activeTab.value = path;
        let index = allTabs.value.findIndex((item) => item.path === path);
        /*
         * 我接到的需求是【一个菜单多次点击的话需要打开多个重复的tab】，
         * 因为tab不允许使用相同的url，所有使用了url/:id的动态路由，每次点击menuCount++作为id以保证每次打开菜单的url不同
         * 如果不需要以上的效果，那么可以调整saveActiveNav的逻辑，增加对tabs中是否已存在该菜单，存在的话就不push到allTabs中，可以去掉url的动态路由
         * */
         //  如果不存在
        if (index === -1) {
          // 添加到tabs中
          allTabs.value.push(Object.assign(tab, { path: path }));
        }
        // 当前激活的tab
        activeTab.value = path;
      };

      onMounted(async () => {
        username.value = '管理员';
        // 当前激活的菜单
        activeTab.value = "/home/1";
        // 所有tab
        allTabs.value = [{
          name: '首页',
          paneName: '首页',
          path: '/home/1'
        }];
        // 激活的tab
        activeTab.value = '/home/1';
      });
   
       return {
         isSidebarCollapsed,
         allTabs,
         activeTab,
         username,
         aiAssistantVisible,
         menuCount,
         toggleSidebar,
         setMenuHover,
         clearMenuHover,
         getMenuIcon,
         saveActiveNav,
         clickTab,
         removeTab,
         changeActiveRoute,
         handleLogout,
         openAIAssistant,
         closeAIAssistant,
         getCurrentPageTitle,
         goToHome,
         router
       };
     }
   };
   </script>
   
   <style scoped>
   html, body, #app {
     background: #f7f9fb !important;
     /* 不再强制100%高度，避免内容溢出 */
   }
   body {
     background: #f7f9fb !important;
   }
   
   @keyframes typing {
     0%, 100% {
       transform: translateY(0);
     }
     50% {
       transform: translateY(-0.3125rem);
     }
   }
  
   .content-header {
     height: 3.75rem;
     /* background-color: #FFFFFF; */
     display: flex;
     align-items: center;
   }
   
   .header-inner {
     margin: 0 auto;
     width: 100%;
     display: flex;
     align-items: center;
     height: 100%;
     gap: 0.9375rem;
     padding: 0 1.25rem;
   }
   
   .header-left {
     display: flex;
     align-items: center;
     gap: 0.9375rem;
   }
   
   .header-grid-icon {
     font-size: 1.1875rem;
     color: #78829d;
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .header-grid-icon:hover {
     color: #5D87FF;
     transform: scale(1.1);
   }
   
   .header-right {
     display: flex;
     align-items: center;
     gap: 0.9375rem;
   }
   
   .header-title-tab {
     font-size: 0.8125rem;
     font-weight: 600;
     color: #78829d;
     margin-left: 0.625rem;
     letter-spacing: 0.5px;
   }
   @media (max-width: 900px) {
     .header-inner {
       width: 90%;
       font-size: 1.1rem;
     }
   }
   
   .header-logo-title {
     display: flex;
     align-items: center;
     gap: 0.4rem;
     flex: 0 0 auto;
     padding: 1.25rem;
     position: relative;
   }
   
   .header-logo {
     width: 1.75rem;
     height: 1.75rem;
     object-fit: contain;
     filter: drop-shadow(0 2px 0.25rem rgba(0,180,255,0.2));
   }
   
   .header-title {
     text-align: left;
     font-size: 0.8125rem;
     font-weight: 700;
     color: #68758e; 
     letter-spacing: 0.05em;
   }
   
   .header-btn-group {
     flex: 1;
     display: flex;
     justify-content: right;
     gap: 1.5rem;
   }
   
   .header-btn {
      padding: 0.4rem 1.2rem;
      border: none;
      border-radius: 0;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-shadow: 0px 1px 1px rgba(255,255,255,0.2);
      position: relative;
      background: linear-gradient(45deg, #FFFFFF 0%, #8787d5 50%, #FFFFFF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent; 
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.5rem;
   }
   
   .header-btn-icon {
      width: 1.125rem;
      margin-left: 0.375rem;
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(255,255,255,0.3));
      cursor: pointer;
   }
   
   .header-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
     border-radius: 0.3rem;
     opacity: 0;
     transition: opacity 0.2s ease;
   }
   
   .header-btn:hover {
     color: #ffffff;
     text-shadow: 0 2px 6px rgba(255,255,255,0.5);
     transform: translateY(-1px);
   }
   
   .header-btn:hover::before {
     opacity: 1;
   }
   
   .header-user-info {
     display: flex;
     align-items: center;
     gap: 0;
     margin-left: auto;
   }
   
   .username {
     color: #303133;
     font-size: 0.875rem;
     font-weight: 500;
   }
   
   .logout-btn {
     color: #ffffff;
     cursor: pointer;
     transition: all 0.2s ease;
     backdrop-filter: blur(0.625rem);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 1.25rem;
     height: 1.25rem;
   }
   
   .logout-btn:hover {
     transform: translateY(-1px);
   }
   
   /* 主体布局样式 */
   .main-layout {
     display: flex;
     min-height: 100vh;
   }
   
   /* 左侧菜单样式 */
   .sidebar-menu {
     width: 13.75rem;
     background: #fefefe;
     border-right: 1.5px solid #e8eaf0;
     box-shadow: 2px 0 0.75rem rgba(0,40,120,0.13);
     flex-shrink: 0;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
   }
   .sidebar-menu.collapsed {
     width: 2.5rem;
     box-shadow: 2px 0 1.25rem rgba(0,40,120,0.2);
   }
   
   .sidebar-toggle {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 0.3125rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
   }
   
   .sidebar-toggle:hover {
     background: rgba(116, 96, 238, 0.1);
     transform: translateY(-50%) scale(1.1);
   }
   

   
   .toggle-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 1rem;
    height: 1rem;
    object-fit: contain;
   }
   

   
   .menu-item {
     padding: 0.8125rem 0.9375rem;
     color: #6b6b6b;
     /* 可选：菜单项发光效果 */
     text-shadow: 0 2px 0.5rem rgba(0,180,255,0.10);
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border-left: 0.1875rem solid transparent;
     font-size: 0.875rem;
     white-space: nowrap;
     overflow: hidden;
     display: flex;
     align-items: center;
     gap: 0.8rem;
     position: relative;
     font-weight: 500;
   }
   
   .menu-icon {
     width: 1.05rem;
     height: 1.05rem;
   }
   
   .menu-text {
     flex: 1;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .sidebar-menu.collapsed .menu-item {
     padding: 0.8rem 0.5rem;
     justify-content: center;
     position: relative;
   }
   
   .sidebar-menu.collapsed .menu-text {
     opacity: 0;
     transform: translateX(-1.25rem);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: absolute;
     left: 100%;
     top: 50%;
     transform: translateY(-50%) translateX(0.625rem);
     background: rgba(0, 0, 0, 0.8);
     color: white;
     padding: 0.5rem 0.8rem;
     border-radius: 0.5rem;
     font-size: 0.9rem;
     white-space: nowrap;
     z-index: 1000;
     pointer-events: none;
     opacity: 0;
   }
   
   .sidebar-menu.collapsed .menu-item:hover .menu-text {
     opacity: 1;
     transform: translateY(-50%) translateX(0.9375rem);
   }
   
   .sidebar-menu.collapsed .menu-icon {
     font-size: 1.4rem;
     width: auto;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .sidebar-menu.collapsed .menu-item:hover .menu-icon {
     transform: scale(1.2);
     color: #4fdfff;
   }
   
   .menu-item:hover {
     border-left-color: #5D87FF;
     color: #5D87FF;
   }
   
   .menu-item.active {
     border-left-color: #5D87FF;
     background: #eef3ff;
     color: #5D87FF;
   }
   
   .sidebar-menu.collapsed .menu-item:hover {
     transform: none;
     background: rgba(0,180,255,0.15);
   }

   .menu-link {
     text-decoration: none;
     color: inherit;
     display: flex;
     align-items: center;
     flex: 1;
   }

   .menu-link:hover {
     color: inherit;
   }

   .menu-link:visited {
     color: inherit;
   }

   .menu-link:active {
     color: inherit;
   }
   
   /* 添加菜单项激活状态的视觉反馈 */
   .menu-item.router-link-active {
     border-left-color: #5D87FF;
     background: rgba(116, 96, 238, 0.12);
     color: #5D87FF;
     font-weight: 600;
   }
   
   .sidebar-menu.collapsed .menu-item.router-link-active {
     background: rgba(116, 96, 238, 0.2);
   }
   
   /* 添加菜单项点击效果 */
   .menu-item:active {
     transform: scale(0.95);
   }
   
   .sidebar-menu.collapsed .menu-item:active {
     transform: scale(0.9);
   }
   
   /* 右侧内容区域样式 */
   .right-content {
     width: calc(100vw - 13.75rem);
     background: #f7f9fb;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .right-content.sidebar-collapsed {
     width: calc(100vw - 2.5rem);
   }
   
   /* 内容区域样式 */
   .content-area {
     flex: 1;
     display: flex;
     flex-direction: column;
     min-height: calc(100vh - 2rem);
   }

   :deep(.el-tabs) {
      --el-tabs-header-height: 1.875rem;
      font-size: 0.8125rem;
      padding: 0 1.25rem;
    }

    :deep(.el-tabs__header) {
      margin: 0 0 !important;
      border-bottom: 1px solid #f4f8f9 !important;
    }

    :deep(.el-tabs__nav-wrap::after) {
      display: none !important;
    }


    :deep(.el-tabs__nav) {
      border: none !important;
      height: 2.125rem;
    }

    
    /* tab选中状态样式 */
    :deep(.el-tabs__item.is-active) {
      color: rgb(93, 135, 255) !important;
      box-shadow: 1px 1px 3px 1px rgb(93, 135, 255, 0.3);
    }
    
    :deep(.el-tabs__item.is-active .el-icon) {
      color: #5D87FF !important;
    }
    
    :deep(.el-tabs__item.is-active .el-tabs__item__close) {
      color: #5D87FF !important;
    }
    
    :deep(.el-tabs__item.is-active:hover) {
      color: #5D87FF !important;
    }
    
    :deep(.el-tabs__item.is-active:hover .el-icon) {
      color: #5D87FF !important;
    }
    
    :deep(.el-tabs__item.is-active:hover .el-tabs__item__close) {
      color: #5D87FF !important;
    }
    
    /* tab默认状态样式 */
    :deep(.el-tabs__item) {
      color: #606266 !important;
      border: 1px solid rgba(219, 223, 233, .6) !important;
      margin: 0 0.1875rem;
      border-radius: 2px 0.625rem 2px 0.625rem;
      font-size: 0.8125rem;
      padding: 0 0.75rem;
      height: 2rem;
      background: #ffffff;
    }
    
    :deep(.el-tabs__item .el-icon) {
      color: #6d717a !important;
    }
    
    :deep(.el-tabs__item .el-tabs__item__close) {
      color: #6d717a !important;
    }
    
    /* tab hover状态样式 */
    :deep(.el-tabs__item:hover) {
      color: #5D87FF !important;
    }
    
    :deep(.el-tabs__item:hover .el-icon) {
      color: #5D87FF !important;
    }
    
    :deep(.el-tabs__item:hover .el-tabs__item__close) {
      color: #5D87FF !important;
    }
    
    /* 隐藏首页tab的关闭按钮 */
    :deep(.el-tabs__item[aria-controls="pane-首页"] .el-tabs__item__close) {
      display: none !important;
    }
    
    /* 确保首页tab在任何状态下都不显示关闭按钮 */
    :deep(.el-tabs__item[aria-controls="pane-首页"]:hover .el-tabs__item__close) {
      display: none !important;
    }
    
    /* chat抽屉样式 */
    .ai-assistant-drawer {
      --el-drawer-bg-color: #ffffff;
      --el-drawer-padding-primary: 0;
    }
    
    .drawer-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 600;
      font-size: 1rem;
      color: #5D87FF;
    }
    
    .drawer-icon {
      width: 1.5rem;
      height: 1.5rem;
      object-fit: contain;
    }
    
    .ai-bot-container {
      height: calc(100vh - 7.5rem);
      width: 100%;
      overflow: hidden;
    }
    
    /* 确保aiBot内容能够正确显示 */
    #aiBot {
      width: 100%;
      height: 100%;
    }
    
    /* 抽屉头部样式覆盖 */
    :deep(.el-drawer__header) {
      padding: 1rem 1.25rem;
      border-bottom: 1px solid #e4e7ed;
      background: #fbfcfd;
      margin-bottom: 0;
    }
    
    :deep(.el-drawer__title) {
      font-size: 1rem;
      font-weight: 600;
      color: #5D87FF;
    }
    
    :deep(.el-drawer__body) {
      padding: 0;
      height: calc(100% - 10rem);
    }
    

   </style> 